<template>
    <div class="toast" v-show="isShow">
        <span>{{message}}</span>
    </div>
</template>

<script>
    import {debounce} from 'common/debounce.js'
    export default {
        data () {
            return {
                message:"默认文字",
                isShow:false
            }
        },
        methods:{
            show(message,delay=1000){
                this.message= message
                this.isShow = true
                debounce(()=>{
                    this.isShow = false
                },delay)()
            }
        }
    }
</script>

<style scoped>
    .toast{
        padding: 10px 24px;
        color: #fff;
        background: rgba(34, 34, 34, 0.7);
        font-size: .8rem;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border-radius: 14px;
        z-index: 999;
    }
</style>